<template>
  <div>
    <el-button @click="openDialog">打开上传弹窗</el-button>
    <el-button @click="editDialog">打开编辑弹窗</el-button>
    <el-dialog :title="showText" :visible="showUploadDialog" @close="close">
      <el-form ref="dialogFrom" :model="dialogForm" label-width="80px">
        <el-form-item :label="`${showText}图片`">
          <PictureUpload
            @receiveData="receiveData"
            :multiple="true"
            :imgType="imgType"
            :pictureList="list"
            :limit="3"
            ref="upload"
          ></PictureUpload>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PictureUpload from "@/components/Upload.vue";
import { setInitImg } from "@/utils/transferFile.js";
export default {
  components: {
    PictureUpload,
  },
  data() {
    return {
      showUploadDialog: false, //是否显示上传弹窗
      dialogForm: {
        id: "",
      }, //弹窗表单参数
      fileList: [], //上传的图片数组
      formdata: {},
      imgType: ["image/png"], //图片格式白名单
      list: [], //数组
      pictureList: [
        "https://cdn.7nyx.cn/yxhz/community_img/2022_04_15/165001259087308.png",
      ],
    };
  },

  computed: {
    showText() {
      return this.dialogForm.id ? "编辑" : "上传";
    },
  },

  methods: {
    //打开上传弹窗
    openDialog() {
      this.showUploadDialog = true;
    },
    //编辑弹窗
    editDialog() {
      this.showUploadDialog = true;
      this.dialogForm.id = 1;
      //模拟接口数据回显
      this.$nextTick(() => {
        this.$refs.upload.fileList = [
          {
            url: "https://t9.baidu.com/it/u=77734676,1458386881&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=80FAEA240C1334C45E155D9D03008090&sec=1657213200&t=10d3b088a2ba9c6bef960be79604e4de",
          },
        ];
      });
    },
    //关闭上传弹窗
    close() {
      this.dialogForm = {
        id: "",
      };
      this.showUploadDialog = false;
      //关闭弹窗通知子组件清空图片数组
      this.$refs.upload.handleEmptyFileList();
      this.fileList = [];
      this.formdata = {};
    },
    async handleSubmit() {
      //处理接收的数据
      await this.handleUploadData();

      this.showUploadDialog = false;
    },
    //接收上传数据
    receiveData(data) {
      this.fileList = data;
    },
    //处理接收的数据
    handleUploadData() {
      return new Promise((res) => {
        //编辑上传图片
        if (this.dialogForm.id) {
          // //改造上传数据
          this.fileList.forEach((item) => {
            if (!item.raw) {
              //图片url转文件
              setInitImg(item.url, (file) => {
                item.raw = file;
              });
            }
          });
        }

        setTimeout(() => {
          this.formdata = new FormData();
          this.fileList.forEach((item) => {
            this.formdata.append("img_source[]", item.raw);
          });

          //打印formdata
          const result = this.formdata.getAll("img_source[]");
          console.log("ressss", result);

          //异步执行完调用res()
          res();
        }, 300);
      });
    },
  },
};
</script>
<style lang="less"></style>
